import { FC } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { IState } from '@/store/index'

const Home: FC = () => {
  const dispatch = useDispatch()
  const { counter } = useSelector((state: IState) => ({
    counter: state.counter,
  }))
  const increment = () => {
    dispatch({
      type: 'INCREMENT',
    })
  }

  const decrement = () => {
    dispatch({
      type: 'DECREMENT',
    })
  }
  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  )
}

export default Home
